<!DOCTYPE HTML>
<html>
<head>
    <title>outPut</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <link rel="stylesheet" href="/static/bootstrap/css/bootstrap.css"/>
    <link rel="stylesheet" href="/static/plugins/bui/bui.css">
    <link href="/static/plugins/layui/css/layui.css" type="text/css" rel="stylesheet">

    <style type="text/css">
        body {
            background:#EFF3FC;
        }

        html, body, .content, #inputDetail,#outputDetail {
            height: 100%;
        }

        ul, li {
            list-style: none;
            padding: 0px;
        }

        .content {
            margin-left: 0;
            margin-top: 0;
            width: auto;
            padding: 0px 20px 0 20px;
        }

        #myTabContent {
            height: 86%;
        }

        #myTab {
            border-top: 1px solid #EFF3FC;
            border-bottom: 2px solid #EFF3FC;
        }

        #inputDetail > div ,#outputDetail>div{
            overflow: hidden;
            height: 97%;
            margin-top: 1%;
        }

        #inputDetail .dictory,#outputDetail .dictory {
            background: #fff;
            width: 14%;
            float: left;
            border: 1px solid #EFF3FC;
            height: 99%;
        }

        #inputDetail .dictory > div, #outputDetail .dictory > div  {
            height: 40px;
            text-align: center;
            /*border-bottom: 1px solid #EFF3FC;*/
            line-height: 40px;
        }

        #inputDetail .dictory ul li,#outputDetail .dictory ul li {
            height: 30px;
            line-height: 30px;
            text-align: center;
        }

        #inputDetail .showDictory,#outputDetail .showDictory{
            background: #fff;
            width: 85%;
            border: 1px solid #EFF3FC;
            float: right;
            height: 99%;
            padding: 20px 30px;
        }

        #inputDetail .showDictory .operationBtn {
            height: 40px;
            border-bottom: 1px solid #EFF3FC;
        }

        #inputDetail .showDictory .showDetail {
            height: 80%;
            width: 86%;
            /*background: red;*/
            margin: 0 auto;
            margin-top: 3%;
            border: 1px solid #EFF3FC;
        }

        #inputDetail .showDictory .showDetail div {
            height: 60px;
            background: #EFF3FC;
            line-height: 60px;
        }

        #inputDetail .showDictory .showDetail div span {
            margin-right: 30px;
        }

        #inputDetail .showDictory .showDetail table {
            width: 90%;
            margin: 0 auto;
            margin-top: 20px;
            text-align: center;
        }

        #inputDetail .showDictory .showDetail table tr:first-child {
            background: #EFF3FC;
        }

        #inputDetail .showDictory .showDetail table tr th {
            text-align: center;
        }

        #inputDetail .showDictory .showDetail table tr {
            height: 30px;
        }

        #outputDetail li:first-child input {
            margin-right: 10px;
        }

        #outputDetail li input {
            margin-right: 14px;
        }

        #inputDetail .btn-info {
            margin-right: 20px;
        }

        .row {
            width: 90%;
            border: none;
            margin: auto;
        }

        .bui-tree-item-selected {
            color: #5bc0de;
            font-weight: 500;
        }

        .bui-tree-list {
            border: none;
        }

        .layui-table {
            overflow-y: scroll;
        }
        .searchInput{
            position: absolute;
            top:45px;
            right:20px;
        }
        .borrowed.nav-pills > li.active > a,.borrowed.nav-pills > li.active > a:hover, .borrowed.nav-pills > li.active > a:focus{
            color:#1E9FFF;
            background-color:#fff;
            border-bottom: 2px solid #1E9FFF;
        }
        .borrowed.nav-pills > li > a {
            border-radius:0px;
        }
        .searchOut{
            position: absolute;
            top:40px;
            right:20px;
        }
        .importDet.nav-pills > li.active > a,.importDet.nav-pills > li.active > a:hover, .importDet.nav-pills > li.active > a:focus{
            color:#49cff6;
            background-color:#EFF3FC;
        }
        .searchOutput input,.searchInput input,.searchInput select{
            border:none;
            padding:10px 20px;
            border-radius: 6px;
        }
        #secondTabContent table{
            margin-top:10px;
        }
        #inputDetail table tbody td:nth-child(3), #outputDetail table tbody td:nth-child(2){
            color:#49cff6;
        }
        #t1,#t2{
            border-top:1px solid #ccc;
            padding-top:10px;
        }
        .x-tree-icon.x-tree-elbow-leaf,.x-tree-icon.x-tree-elbow-dir{
            display:none;
        }
        .borrowDetail{
            position: absolute;
            top:100%;
            right:0px;
            background: #fff;
            border: 1px solid #ccc;
            border-radius: 4px;
            min-width: 260px;
            z-index:999;
        }
        .borrowDetail table tr th, .borrowDetail table tr td{
            border:none;
        }
        .borrowDetail table tr th{
            font-weight: normal;
            text-align: right;
        }
        .borrowDetail_title{
            margin:20px 30px;
            border-bottom: 1px solid #ccc;
        }
        .borrowDetail_title span:nth-child(1){
            display: inline-block;
            height: 35px;
        }
        /*.bui-tree-list .x-tree-elbow-expander, .bui-tree-grid .x-tree-elbow-expander{*/
            /*background-position:0px 5px;*/
        /*}*/
        .form-group div{
            padding-top: 8px;
            margin-top: 0;
            margin-bottom: 0;
        }
    </style>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<div class="content" id="app">
    <div style="padding: 10px 0;">档案保管>出入库</div>
    <ul id="myTab" class="nav importDet nav-pills">
        <li class="active" >
            <a href="#inputDetail" data-toggle="tab">入库明细</a>
        </li>
        <li>
            <a href="#outputDetail" data-toggle="tab">借阅登记</a>
        </li>
    </ul>
    <div id="myTabContent" class="tab-content">
        <div class="tab-pane fade in active" id="inputDetail">
            <div>
                <div class="searchInput">
                    <span>
                        <span>状态：</span>
                        <select ng-model="searchInput_state">
                            <option selected="selected">全部</option>
                            <option value="在库">在库</option>
                            <option value="借出">借出</option>
                            <!--<option value="移交">移交</option> 跟产品经理商量过目前不需要-->
                        </select>
                    </span>
                        <span>
                        <input type="search" ng-model="searchInput_key" placeholder="题名">
                    </span>
                </div>
                <div class="dictory">
                    <div>档案柜</div>
                    <div class="row">
                        <div class="span8 offset3">
                            <div id="t1"></div>
                        </div>
                    </div>
                </div>
                <div class="showDictory">
                    <div class="operationBtn" style="float:right;margin: 10px 0 10px;display: block;">
                        <button class="btn btn-info" data-toggle="modal" data-target="#paperInput">纸质入库</button>
                        <button class="btn btn-info" data-toggle="modal" data-target="#editModal">销毁</button>
                    </div>
                    <table class="table table-striped">
                        <thead>
                        <tr>
                            <td width="2%">
                                <input type="checkbox">
                            </td>
                            <td width="10%">档号</td>
                            <td width="10%">题名</td>
                            <td width="7%">所属部门</td>
                            <td width="7%">类型</td>
                            <td width="7%">保管期限</td>
                            <td width="7%">状态</td>
                            <td width="7%">负责人</td>
                            <td width="10%">位置</td>
                            <td width="10%">入库时间</td>
                            <td width="9%">入库方式</td>
                            <td width="6%">操作人</td>
                            <td width="10%">操作</td>
                        </tr>
                        </thead>
                        <tbody>
                            <tr ng-repeat="each in outputList">
                                <td>
                                    <input type="checkbox">
                                </td>
                                <td ng-bind="each.serial"></td>
                                <td ng-bind="each.title"></td>
                                <td ng-bind="each.department_name"></td>
                                <td ng-bind="each.storage_type"></td>
                                <td ng-bind="each.storage_deadline"></td>
                                <td ng-bind="each.file_status"></td>
                                <td ng-bind="each.owner_username"></td>
                                <td ng-bind="each.location"></td>
                                <td ng-bind="each.storage_time"></td>
                                <td ng-bind="each.storage_method"></td>
                                <td ng-bind="each.operator_username"></td>
                                <td ng-if="each.borrowing_record_id>0">
                                    <a class="btn btn-info" data-toggle="modal" data-target="#borrowedModal" style="color: #49cff6;background-color:transparent;border-color:transparent;" >已借出</a>
                                </td>
                                <td ng-if="each.borrowing_record_id<0">
                                    <a class="btn btn-info" data-toggle="modal" data-target="#outReadModal" style="color: #f8b498;background-color:transparent;border-color:transparent;" >借阅</a>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                    <div id="pageBar" style="position:relative;"></div>
                </div>
            </div>
        </div>
        <div class="tab-pane fade" id="outputDetail">
            <div>
                <div class="dictory">
                    <div>档案柜</div>
                    <div class="row">
                        <div class="span8 offset3">
                            <div id="t2"></div>
                        </div>
                    </div>
                </div>
                <div class="showDictory">
                    <ul id="secondTab" class="nav borrowed nav-pills">
                        <li class="active" >
                            <a href="#borrow" data-toggle="tab">借阅记录</a>
                        </li>
                        <li>
                            <a href="#returned" data-toggle="tab">归还记录</a>
                        </li>
                    </ul>
                    <div id="secondTabContent" class="tab-content">
                        <div class="tab-pane fade in active" id="borrow">
                            <div class="searchOut">
                                <span class="searchOutput">
                                    <input type="search" placeholder="题名/档号" ng-model="borrowSearch">
                                </span>
                            </div>
                            <table class="table table-striped">
                                <thead>
                                    <tr>
                                        <th>档号</th>
                                        <th>题名</th>
                                        <th>计划归还日期</th>
                                        <th>状态</th>
                                        <th>位置</th>
                                        <th>借阅人</th>
                                        <th>借出时间</th>
                                        <th>操作人</th>
                                        <th>操作</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr ng-repeat="item in borrowList">
                                        <td ng-bind="item.serial">{{item.serial}}</td>
                                        <td >{{item.title}}</td>
                                        <td>{{item.return_deadline }}</td>
                                        <td>{{item.status}}</td>
                                        <td>{{item.verbose_name}}</td>
                                        <td>{{item.borrower}}</td>
                                        <td>{{item.borrow_time}}</td>
                                        <td>{{item.operator}}</td>
                                        <td style="position: relative;">
                                            <span style="color:#f8b498;">借阅</span>
                                            <span style="color:#49cff6;" ng-click="hadBorrowed(item.title)">已借出</span>
                                            <div class="borrowDetail" ng-if="isShowHadBorrowed == item.title">
                                                <div class="borrowDetail_title">
                                                    <span>借出详情</span>
                                                    <span  style="float: right;font-weight: 800;" ng-click="cancelBtn()">X</span>
                                                </div>
                                                <table>
                                                    <tr>
                                                        <th>借出时间</th>
                                                        <td>11</td>
                                                    </tr>
                                                    <tr>
                                                        <th>计划归还时间</th>
                                                        <td>22</td>
                                                    </tr>
                                                    <tr>
                                                        <th>借阅人</th>
                                                        <td>22</td>
                                                    </tr>
                                                    <tr>
                                                        <th>状态</th>
                                                        <td>22</td>
                                                    </tr>
                                                    <tr>
                                                        <th>操作人</th>
                                                        <td>22</td>
                                                    </tr>
                                                </table>
                                            </div>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                        <div class="tab-pane fade" id="returned">
                            <div class="searchOut">
                                <span class="searchOutput">
                                    <input type="search" placeholder="题名/档号" ng-model="returnSearch">
                                </span>
                            </div>
                            <table class="table table-striped">
                                <thead>
                                <tr>
                                    <th>档号</th>
                                    <th>题名</th>
                                    <th>归还日期</th>
                                    <th>计划归还日期</th>
                                    <th>是否延期</th>
                                    <th>位置</th>
                                    <th>操作人</th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr ng-repeat="item in returnList">
                                    <td>{{item.serial}}</td>
                                    <td>{{item.title}}</td>
                                    <td>{{item.return_time }}</td>
                                    <td>{{item.return_deadline}}</td>
                                    <td>{{item.is_delay }}</td>
                                    <td>{{item.is_delay}}</td>
                                    <td>{{item.operator}}</td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!--纸质入库模态框-->
<div class="modal fade" id="paperInput" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"
     data-backdrop="static">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    &times;
                </button>
                <h4 class="modal-title" id="myModalLabel">
                    纸质入库
                </h4>
            </div>
            <div class="modal-body">
                <form action="/archivesFile/file/add/" method="post">
                    <div class="form-group row">
                        <label class="col-md-3 control-label">题名：</label>
                        <div class="col-md-6"><input type="text" placeholder="输入不多于10个文字" name="title"/></div>
                    </div>
                    <div class="form-group row">
                        <label class="col-md-3 control-label">档号：</label>
                        <div class="col-md-6"><input type="text" name="serial" placeholder="输入不多于20个字母或数字，用于系统调用"/></div>
                    </div>
                    <div class="form-group row">
                        <label class="col-md-3 control-label">类型：</label>
                        <div class="col-md-6">
                            <select style="width:100%;" name="storage_type">
                                <option value="volvo" selected="selected">请选择</option>
                                <option value="工单">工单</option>
                                <option value="党建">党建</option>
                                <option value="工程">工程</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group row">
                        <label class="col-md-3 control-label">保管期限：</label>
                        <div class="col-md-3">
                            <select style="width:100%;" name="storage_deadline">
                                <option value="volvo" selected="selected">请选择</option>
                                <option value="5年">5年</option>
                                <option value="10年">10年</option>
                                <option value="30年">30年</option>
                                <option value="永久">永久</option>
                            </select>
                        </div>
                        <label class="col-md-3 control-label">密&nbsp;&nbsp;&nbsp;&nbsp;级：</label>
                        <div class="col-md-3">
                            <select style="width:100%;" name="secret_level">
                                <option value="volvo" selected="selected">请选择</option>
                                <option value="公开">公开</option>
                                <option value="内部">内部</option>
                                <option value="保密">保密</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group row">
                        <label class="col-md-3 control-label">存放位置：</label>
                        <div class="col-md-3">
                            <input type="hidden"  name="cabinet" value="1" /> <!-- TODO 测试使用 -->
                            <input type="hidden"  name="lattice" value="1" /> <!-- TODO 测试使用 -->
                            <input type="hidden"  name="box" value="1" /> <!-- TODO 测试使用 -->
                            <input type="hidden"  name="owner" value="1" /> <!-- TODO 测试使用 -->
                            <input type="hidden" name="operator" value="1" /> <!-- TODO 测试使用 -->
                            <input type="hidden" name="storage_method" value="纸质入库" /> <!-- TODO 测试使用 -->
                        </div>
                        <label class="col-md-3 control-label">责任人：</label>
                        <div class="col-md-3">
                            <input type="text" placeholder="责任人" name="username"/>
                        </div>
                    </div>
                    <div class="form-group row">
                        <label class="col-md-3 control-label">图片：</label>
                        <div class="col-md-6">
                            <input type="submit" value="提交">
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" onclick="okAdd()">确定</button>
            </div>
        </div>
    </div>
</div>
<!--借阅模态框  -->
<div class="modal fade" id="outReadModal" tabindex="-1" role="dialog" aria-labelledby="myModalOutRead" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content" style="background-color: #EFF3FC;">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    &times;
                </button>
                <h4 class="modal-title" id="myModalOutRead">
                    借阅
                </h4>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-sm-12">
                        <form role="form" class="form-horizontal">
                            <div class="form-group">
                                <label for="pDept" class="col-sm-3 control-label"><span style="color:#ff0000">*</span>借阅人</label>
                                <div class="col-sm-8">
                                    <input type="text" class="form-control" id="pDept" ng-model="deptForm.pDept">
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="name" class="col-sm-3 control-label"><span style="color:#ff0000">*</span>计划归还时间</label>
                                <div class="col-sm-8">
                                    <input type="text" class="form-control" id="name" ng-model="deptForm.name"
                                           maxlength="30">
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" ng-click="addConfirmDept(deptForm)">
                    提交
                </button>
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>

            </div>
        </div>
    </div>
</div>
<!--已借出模态框  -->
<div class="modal fade" id="borrowedModal" tabindex="-1" role="dialog" aria-labelledby="myModalborrowed" aria-hidden="true">
    <div class="modal-dialog" style="width:25%;">
        <div class="modal-content" style="background-color: #EFF3FC;">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    &times;
                </button>
                <h4 class="modal-title" id="myModalborrowed">
                    借出详情
                </h4>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-sm-12">
                        <form role="form" class="form-horizontal">
                            <div class="form-group">
                                <label for="pDept" class="col-sm-6 control-label">借出时间：</label>
                                <div class="col-sm-6">
                                    <span ng-bind="'2019-02-23 08:00:00'"></span>
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="name" class="col-sm-6 control-label">计划归还时间：</label>
                                <div class="col-sm-6">
                                    <span ng-bind="'2019-02-24 08:00:00'"></span>
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="name" class="col-sm-6 control-label">借阅人：</label>
                                <div class="col-sm-6">
                                    <span ng-bind="'李梅'"></span>
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="name" class="col-sm-6 control-label">状态：</label>
                                <div class="col-sm-6">
                                    <span ng-bind="'延期'"></span>
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="name" class="col-sm-6 control-label">操作人：</label>
                                <div class="col-sm-6">
                                    <span ng-bind="'张志强'"></span>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


<script type="text/javascript" src="/static/assets/js/jquery.min.js"></script>
<script src="/static/plugins/bui/seajs/2.3.0/sea.js"></script>
<script src="/static/plugins/bui/bui/1.1.21/config.js"></script>
<script type="text/javascript" src="/static/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="/static/plugins/angular/angular.min.js"></script>
<script language="Javascript" src="/static/plugins/layui/js/layui.js"></script>

<script>
    var app = angular.module("myApp", []);
    app.controller("myCtrl", function ($scope,$http,$timeout) {
        $scope.isShowHadBorrowed ='';
        // $scope.outputList = [
        //     {
        //         serial: 'YJ-2019-YUN-D10-1001',
        //         title: 'IDC增值服务工单',
        //         dept: '维护部',
        //         storage_type: '工单',
        //         storage_deadline: '永久',
        //         file_status: '借出',
        //         storage_method: '纸质入库',
        //         owner: '张扬',
        //         operator: '李欢',
        //         secret_level: '公开',
        //         storage_time: '2019-01-03 08:30',
        //         storage_location: 2,
        //         borrowing_record: 1,
        //     },
        //     {
        //         serial: 'YJ-2019-WH-D10-1001',
        //         title: '中国电信云计算（陕西）基地IDC机房入室申请单',
        //         dept: '云业务部',
        //         storage_type: '工单',
        //         storage_deadline: '10年',
        //         file_status: '在库',
        //         storage_method: '数字化入库',
        //         owner: '刘晓萌',
        //         operator: '李欢',
        //         secret_level: '公开',
        //         storage_time: '2019-02-03 20:30',
        //         storage_location: 2,
        //         borrowing_record: 1,
        //     }
        // ]

        $scope.borrowList = [
            {
                serial: 'YJ-2019-WH-D10-1001',
                title: '中国电信云计算（陕西）基地IDC机房入室申请单',
                return_deadline: '2019-2-6 18:00',
                status: '工单',
                verbose_name: '001柜-Num1-0001盒',
                borrower: '张强强',
                borrow_time: '2019-1-3 14:56',
                operator: '李欢'
            },
            {
                serial: 'YJ-2019-WH-D10-1001',
                title: '中国电信云计算（陕西）基地IDC机房入室',
                return_deadline: '2019-2-1 17:00',
                status: '工单',
                verbose_name: '001柜-Num1-0001盒',
                borrower: '孙珊珊',
                borrow_time: '2019-1-11 15:21',
                operator: '李欢'
            }
        ]
        $scope.returnList =[
            {
                serial: 'YJ-2019-WH-D10-1001',
                title: '中国电信云计算（陕西）基地IDC机房入室申请单',
                return_time: '2019-3-10 12:00',
                return_deadline: '2019-3-10 12:00',
                is_delay: '否',
                cabinet:'001柜-Num1-0001盒',
                operator: '李欢'
            },{
                serial: 'YJ-2019-WH-D10-1001',
                title: '中国电信云计算（陕西）基地IDC机房入室',
                return_time: '2019-3-12 12:00',
                return_deadline: '2019-3-12 12:00',
                is_delay: '是',
                cabinet:'001柜-Num1-0001盒',
                operator: '李欢'
            }
        ]

        $scope.outputList=[];
        $scope.searchInput_state='在库';
        $scope.searchInput_key='在库';
        function initTable(){
            $.post("http://127.0.0.1:8000/archivesFile/file/data",function(data,status){
                 $scope.outputList=data.data;
            });
        }
        initTable();
        layui.use(['laypage', 'layer'], function () {
                var laypage = layui.laypage
                    , layer = layui.layer;

                laypage.render({
                    elem: 'pageBar'
                    , count: $scope.outputList && $scope.outputList.length ? $scope.outputList.length : 0
                    , layout: ['count', 'prev', 'page', 'next', 'limit', 'skip']
                    , jump: function (obj) {
                        //obj.curr得到当前页，以便向服务端请求对应页的数据。
                        //obj.limit得到每页显示的条数
                        $scope.outputList = $scope.outputList.slice((obj.curr - 1) * obj.limit, obj.curr * obj.limit - 1);
                        $scope.$digest();
                    }
                });
            }
        );
        // 获取借阅记录数据
        initBorrow();
        function initBorrow(){
            var data = "";
            $http({
                method: 'POST',
                url: 'http://127.0.0.1:9999/borrow/borrow/',
                data:data,
                headers: {'Content-Type': 'application/x-www-form-urlencoded' },
            }).success(function(res){
                // $scope.borrowList = res;
                console.log("res",res);
            })
        }
        // 获取归还记录数据
        // initReturn();
        function initReturn(){
            var data = "";
            $http({
                method: 'POST',
                url: 'http://127.0.0.1:9999/borrow/return/',
                data:data,
                headers: {'Content-Type': 'application/x-www-form-urlencoded' },
            }).success(function(res){
                // $scope.returnList = res;
                console.log("res11",res);
            })
        }
        // 点击已借出事件
        $scope.hadBorrowed =function(title){
            $scope.isShowHadBorrowed = title;
        }
        $scope.cancelBtn =function(){
            $scope.isShowHadBorrowed = '';
        }

        BUI.use('bui/tree', function (Tree) {
                var data = {{ tree | safe }}
                var tree = new Tree.TreeList({
                    render: '#t1',
                    nodes: data
                });
                var otree = new Tree.TreeList({
                    render: '#t2',
                    nodes: data
                });

                tree.render();
                otree.render();

                tree.on('itemclick', function (ev) {
                    var item = ev.item;
                    $('.log').text(item.text);
                    var params={
                        file_status:$scope.searchInput_state,
                        title:$scope.searchInput_key
                    }
                    if(ev.item.level==1){//柜子
                        params.cabinet_id=ev.item.id;
                    }else if(ev.item.level==2){//格子
                        params.lattice_id=ev.item.id;
                    }else if(ev.item.level==3){//盒子
                        params.box_id=ev.item.id;
                    }
                    $.post("http://127.0.0.1:8000/archivesFile/file/data",params,function(data,status){
                        $scope.outputList=data.data;
                    });
                });
                otree.on('itemclick', function (ev) {
                    var item = ev.item;
                    $('.log').text(item.text);
                });
            });

    });


    var json = [{
        checked: '<input type="checkbox">',
        serial: 'YJ-2019-YUN-D10-1001',
        title: 'IDC增值服务工单',
        dept: '维护部',
        storage_type: '工单',
        storage_deadline: '永久',
        file_status: '借出',
        storage_method: '纸质入库',
        owner: '张扬',
        operator: '李欢',
        secret_level: '公开',
        storage_time: '2019-01-03 08:30',
        storage_location: 2,
        borrowing_record: 1
    }]
    for (var item of json) {
        if (item.borrowing_record == 1) {
            item.borrowing_record = '<span class="oprBtnJY" style="color:red;cursor:pointer;">借阅 </span>';
        } else {
            item.borrowing_record = '<span class="oprBtnYJC" style="color:#1E9FFF;cursor:pointer;">已借出 </span>';
        }
    }

    //nameList与widthList的数组长度要一致
    var nameList = ['<input type="checkbox" id="checkAll">', '档号', '题名', '所属部门', '类型', '保管期限', '状态', '入库方式', '负责人', '操作人', '保密等级', '入库', '位置', '操作'] //table的列名
    var widthList = [100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100] //table每列的宽度



    setTimeout(function () {
        $('.oprBtnJY').click(function () {
            console.log('oprBtnJY');
        });
        $('.oprBtnYJC').click(function () {
            console.log('oprBtnYJC');
        });
    }, 1000)
</script>
<body>
</html>
